<template>
  <div ref="echart">
  </div>
</template>

<script lang="ts">
import * as Echarts from 'echarts';
import {ECBasicOption} from "echarts/types/src/util/types";
import { ElSizeListen } from '../utils/ElSizeListen';
import PageShowMixin from "../mixins/PageShowMixin";
export default {
  name: "EchartsCom",
  mixins:[PageShowMixin],
  data() {
    return {
      echart: null as Echarts.EChartsType,
      options: null,
    }
  },
  mounted() {
    ElSizeListen.removeListenAll(this.$refs.echart)
    ElSizeListen.addListen(this.$refs.echart,this.resize,false)
  },
  beforeDestroy() {
    ElSizeListen.removeListenAll(this.$refs.echart)
    if(this.echart) {
      this.echart.dispose()
    }
  },
  methods: {
    // 这个函数进行重写
    windowPageShow(ev) {
      if(ev.persisted){
        // 这里是需要个性化的
        this.resize()
      }
    },
    resize() {
      if(this.options && this.echart) {
        this.echart.resize()
      }
    },
    setOptions(options: ECBasicOption) {
      if (!this.echart) {
        this.echart = Echarts.init(this.$refs.echart)
      }
      this.options = options
      this.echart.setOption(options, true)
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
